<template>
    <div class="monitor-container">
        <!-- 顶部标题和状态栏 -->
        <div class="header">
            <div>
                <span class="device-info">设备识别码: {{ equipmentId }}</span>
                <span class="imei-info">数据发送时间: {{ formatSendTime }}</span>
            </div>
            <div class="status-bar">
                <span :class="['status', systemStatus]">{{ systemStatusText }}</span>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 左侧监测数据卡片 -->
            <div class="left-panel">
                <!-- 设备状态卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h3>设备状态</h3>
                    </div>
                    <div class="card-body">
                        <div class="dido-grid">
                            <div class="param-row">
                                <span class="param-label">信号强度</span>
                                <span class="param-value">{{dsignal}}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">电池状态</span>
                                <span class="param-value" :class="paramBatterysStatus(batterys)">{{ batterysStatus(batterys) }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">电池电量</span>
                                <span class="param-value">{{volvalue}} %</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">电池电压</span>
                                <span class="param-value">{{voltagevalue}} mV</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">温度值</span>
                                <span class="param-value">{{tvalue}} °C</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">监测值</span>
                                <span class="param-value">{{data}} {{dataunit}}</span>
                            </div>
                            <!--<div class="param-row">-->
                                <!--<span class="param-label">防区号</span>-->
                                <!--<span class="param-value">{{ccc}}</span>-->
                            <!--</div>-->
                            <!--<div class="param-row">-->
                                <!--<span class="param-label">防拆状态</span>-->
                                <!--<span class="param-value" :class="paramTamperstatusStatus(tamperstatus)">{{ tamperstatusStatus(tamperstatus) }}</span>-->
                            <!--</div>-->
                        </div>
                    </div>
                </div>
                <!-- 安装信息卡片 -->
                <div class="card" v-if="warnTime === ''">
                    <div class="card-header">
                        <h3>安装信息</h3>
                    </div>
                    <div class="card-body">
                        <div class="control-grid">
                            <div class="param-row">
                                <span class="param-label">设备型号</span>
                                <span class="param-value">{{ dtypename }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">安装站点</span>
                                <span class="param-value">{{ siaddress }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">安装楼层</span>
                                <span class="param-value">{{ sitelname }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">详细地址</span>
                                <span class="param-value">{{ installaddress }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">经度</span>
                                <span class="param-value">{{ longitude }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">纬度</span>
                                <span class="param-value">{{ latitude }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧设备参数卡片 -->
            <div class="right-panel">
                <!-- 设备参数卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h3>水压数据</h3>
                    </div>
                    <div class="card-body">
                        <div class="power-grid">
                            <div class="param-row">
                                <span class="param-label">监控数据</span>
                                <span class="param-value">{{ monitorname }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">水压状态</span>
                                <span class="param-value" :class="paramWpstatusStatus(wpstatus)">{{ wpstatusStatus(wpstatus) }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">变化率状态</span>
                                <span class="param-value" :class="paramWstatusStatus(wrstatus)">{{ wstatusStatus(wrstatus) }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">倾斜状态</span>
                                <span class="param-value" :class="paramWstatusStatus(wdstatus)">{{ wstatusStatus(wdstatus) }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">震动状态</span>
                                <span class="param-value" :class="paramWstatusStatus(wkstatus)">{{ wstatusStatus(wkstatus) }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">漏水状态</span>
                                <span class="param-value" :class="paramWstatusStatus(wostatus)">{{ wstatusStatus(wostatus) }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">本次流量</span>
                                <span class="param-value">{{ singleflow }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">累计流量</span>
                                <span class="param-value">{{ totalflow }}</span>
                            </div>
                            <div class="param-row">
                                <span class="param-label">采集时间</span>
                                <span class="param-value">{{ formatCollectiontime }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 报警信息栏 -->
        <div class="alarm-panel" :class="{ active: hasAlarm }">
            <div class="alarm-header">
                <h3>报警信息</h3>
                <span class="alarm-count" v-if="alarms.length > 0">{{ alarms.length }}条报警</span>
            </div>
            <div class="alarm-list">
                <div
                        v-for="(alarm, index) in alarms"
                        :key="index"
                        class="alarm-item"
                >
                    <div class="alarm-time">{{ alarm.time }}</div>
                    <div class="alarm-content">{{ alarm.content }}</div>
                </div>
                <div class="no-alarm" v-if="alarms.length === 0">无报警信息</div>
            </div>
        </div>
    </div>
</template>

<script>
    import request from "@/utils/request";

    export default {
        name: "CurrentLsData",
        data() {
            return {
                // 设备基本信息
                equipmentInputStoreId: this.$route.query.equipmentInputStoreId || '',
                equipmentId: this.$route.query.equipmentId || '',
                warnTime: this.$route.query.warnTime || '',
                sendTime: null,

                // 数据信息
                messagetype: null,         // 事件类型
                devicetype: "",      // 设备类型
                // statedesc: "",        // 状态描述
                mac: "",       // 设备MAC
                // ccid: "",     // ICCID
                imsi: "",        // IMSI
                dsignal: null,     // 信号强度
                batterys: null,       // 电池状态
                voltagevalue: null,       // 电压值(mV)
                volvalue: null,       // 电量(%)
                // tvalue: null,       // 温度值(°C)
                dataunit: "",       // 数据单位
                data: "",         // 监测值
                // bjcode: "",         // 事件代码
                // imei: "",         // imei
                // ccc: "",        // 防区号
                // tamperstatus: null,      // 防拆状态
                // cstatus: null,           // 保留字段
                dtypename: "",        // 设备型号
                siaddress: "",        // 设备安装的站点地址
                sitelname: "",        // 设备安装的楼层
                installaddress: "",   // 设备安装的详细地址
                longitude: null,         // 经度
                latitude: null,          // 纬度

                // 设备信息
                monitorname: "",        // 监控数据
                wpstatus: null,        // 水压/水位状态
                wrstatus: null,        // 变化率状态
                wdstatus: null,        // 倾斜状态
                wkstatus: null,        // 震动报警
                wostatus: null,        // 漏水状态
                singleflow: "",        // 本次流量
                totalflow: "",        // 累计流量
                collectiontime: null,        // 采集时间

                // 报警阈值
                tempAlarmThreshold: 60,     // 温度报警阈值(℃)

                // 报警信息
                alarms: [],

                // 定时器
                updateTimer: null
            }
        },
        computed: {
            // 格式化发送时间
            formatSendTime() {
                if (!this.sendTime) return '';
                return new Date(this.sendTime).toLocaleString();
            },
            formatCollectiontime() {
                if (!this.collectiontime) return '';
                return new Date(this.collectiontime).toLocaleString();
            },
            // 计算漏电百分比(用于仪表盘显示)
            leakagePercentage() {
                const max = 1000; // 最大显示1000mA
                const value = Math.min(this.leakv, max);
                return (value / max) * 180 - 90; // -90到90度
            },

            // 系统状态和文本
            systemStatus() {
                if (this.alarms.length > 0) {
                    return 'alarm';
                }
                return 'normal';
            },

            systemStatusText() {
                if (this.messagetype === 0) {
                    return '其他';
                } else if (this.messagetype === 1) {
                    return '设备心跳';
                } else if (this.messagetype === 2) {
                    return '设备报警';
                } else if (this.messagetype === 3) {
                    return '报警恢复';
                } else if (this.messagetype === 4) {
                    return '防拆报警';
                } else if (this.messagetype === 5) {
                    return '防拆恢复';
                } else if (this.messagetype === 6) {
                    return '电池低压';
                } else if (this.messagetype === 7) {
                    return '电池低压恢复';
                } else if (this.messagetype === 8) {
                    return '自检';
                } else if (this.messagetype === 9) {
                    return '故障';
                } else if (this.messagetype === 10) {
                    return '故障恢复';
                } else if (this.messagetype === 11) {
                    return '测试';
                } else if (this.messagetype === 12) {
                    return '电量统计';
                } else if (this.messagetype === 13) {
                    return '温度报警';
                } else if (this.messagetype === 14) {
                    return '温度报警恢复';
                } else if (this.messagetype === 15) {
                    return '红外检测报警';
                } else if (this.messagetype === 16) {
                    return '红外检测报警恢复';
                } else if (this.messagetype === 17) {
                    return '气体浓度超标报警';
                } else if (this.messagetype === 18) {
                    return '气体浓度超标报警恢复';
                } else {
                    return '正常';
                }
            },

            // 是否有任何报警
            hasAlarm() {
                // 检查报警
                if (this.alarms.length > 0) return true;
                return false;
            }
        },
        methods: {
            // 电池状态
            batterysStatus(value) {
                return value === 1 ? '正常' : value === 0 ? '低压' : '';
            },

            paramBatterysStatus(value) {
                return value === 1 ? 'normal' : value === 0 ? 'alarm' : 'normal';
            },

            // 防拆状态
            tamperstatusStatus(value) {
                return value === 0 ? '闭合' : value === 1 ? '打开' : '';
            },

            paramTamperstatusStatus(value) {
                return value === 0 ? 'normal' : value === 1 ? 'alarm' : 'normal';
            },

            //水压/水位状态
            paramWpstatusStatus(value) {
                if (value === 0) {
                    return "normal";
                } else if (value === 1) {
                    return "alarm";
                } else if (value === 2) {
                    return "alarm";
                } else {
                    return "";
                }
            },

            wpstatusStatus(value) {
                if (value === 0) {
                    return "正常";
                } else if (value === 1) {
                    return "欠压";
                } else if (value === 2) {
                    return "过压";
                } else {
                    return "";
                }
            },

            // 其他状态
            paramWstatusStatus(value) {
                if (value === 0) {
                    return "normal";
                } else if (value === 1) {
                    return "alarm";
                } else {
                    return "";
                }
            },

            wstatusStatus(value) {
                if (value === 0) {
                    return "正常";
                } else if (value === 1) {
                    return "报警";
                } else {
                    return "";
                }
            },

            // 从后端接口获取实时数据
            async fetchRealtimeData() {
                try {
                    let response = '';
                    if (this.warnTime != "") {
                        response = await request.get("/warn-ls/getInfo?equipmentInputStoreId=" + this.equipmentInputStoreId + "&warnTime=" + this.warnTime);
                    } else {
                        response = await request.get(`/current-ls/${this.equipmentInputStoreId}`);
                    }

                    if (response.data) {
                        this.parseRealtimeData(response.data);
                    }
                } catch (error) {
                    console.error('获取实时数据失败:', error);
                }
            },

            // 解析实时数据
            parseRealtimeData(data) {
                this.equipmentInputStoreId = data.equipmentInputStoreId || '';
                this.sendTime = data.sendTime;
                this.messagetype = data.messagetype;
                this.devicetype = data.devicetype;
                this.statedesc = data.statedesc;
                this.mac = data.mac;
                this.ccid = data.ccid;
                this.imsi = data.imsi;
                this.dsignal = data.dsignal;
                this.batterys = data.batterys;
                this.voltagevalue = data.voltagevalue;
                this.volvalue = data.volvalue;
                // this.tvalue = data.tvalue;
                this.dataunit = data.dataunit;
                this.data = data.data;
                // this.bjcode = data.bjcode;
                // this.imei = data.imei;
                // this.ccc = data.ccc;
                // this.tamperstatus = data.tamperstatus;
                // this.cstatus = data.cstatus;

                this.monitorname = data.monitorname;
                this.wpstatus = data.wpstatus;
                this.wrstatus = data.wrstatus;
                this.wdstatus = data.wdstatus;
                this.wkstatus = data.wkstatus;
                this.wostatus = data.wostatus;
                this.singleflow = data.singleflow;
                this.totalflow = data.totalflow;
                this.collectiontime = data.collectiontime;

                this.dtypename = data.dtypename;
                this.siaddress = data.siaddress;
                this.sitelname = data.sitelname;
                this.installaddress = data.installaddress;
                this.longitude = data.longitude;
                this.latitude = data.latitude;
                // 处理报警信息
                this.handleAlarms();
            },

            // 处理报警信息
            handleAlarms() {
                const newAlarms = [];
                const currentTime = this.formatSendTime;

                if (this.messagetype === 2) {
                    newAlarms.push({
                        time: currentTime,
                        content: `设备报警`
                    });
                } else if (this.messagetype === 4) {
                    newAlarms.push({
                        time: currentTime,
                        content: `防拆报警`
                    });
                } else if (this.messagetype === 6) {
                    newAlarms.push({
                        time: currentTime,
                        content: `电池低压`
                    });
                } else if (this.messagetype === 9) {
                    newAlarms.push({
                        time: currentTime,
                        content: `故障`
                    });
                } else if (this.messagetype === 13) {
                    newAlarms.push({
                        time: currentTime,
                        content: `温度报警`
                    });
                } else if (this.messagetype === 15) {
                    newAlarms.push({
                        time: currentTime,
                        content: `红外检测报警`
                    });
                } else if (this.messagetype === 17) {
                    newAlarms.push({
                        time: currentTime,
                        content: `气体浓度超标报警`
                    });
                }

                // 电池低压
                if (this.batterys === 0) {
                    newAlarms.push({
                        time: currentTime,
                        content: `电池低压`
                    });
                }
                // 防拆状态
                if (this.tamperstatus === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `防拆状态打开`
                    });
                }

                if (this.wpstatus === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `水压欠压警告`
                    });
                } else if (this.wpstatus === 2) {
                    newAlarms.push({
                        time: currentTime,
                        content: `水压过压警告`
                    });
                }

                if (this.wrstatus === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `变化率状态报警`
                    });
                }

                if (this.wdstatus === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `倾斜状态报警`
                    });
                }

                if (this.wkstatus === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `震动报警报警`
                    });
                }

                if (this.wostatus === 1) {
                    newAlarms.push({
                        time: currentTime,
                        content: `漏水状态报警`
                    });
                }

                // 合并新报警(去重)
                newAlarms.forEach(alarm => {
                    const exists = this.alarms.some(a => a.content === alarm.content && a.time === alarm.time);
                    if (!exists) {
                        this.alarms.unshift(alarm); // 最新的报警放前面
                    }
                });

                // 限制报警列表长度
                if (this.alarms.length > 10) {
                    this.alarms = this.alarms.slice(0, 10);
                }
            }
        },
        mounted() {
            // 启动定时更新数据(每60秒)
            this.updateTimer = setInterval(() => {
                this.fetchRealtimeData();
            }, 60000);

            // 初始加载数据
            this.fetchRealtimeData();
        },
        beforeDestroy() {
            // 清除定时器
            if (this.updateTimer) {
                clearInterval(this.updateTimer);
            }
        }
    }
</script>

<style scoped>
    .monitor-container {
        font-family: 'Arial', sans-serif;
        color: #ffffff;
        width: 100%;
        margin: 0 auto;
        padding: 20px;
        min-height: 100vh;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
        flex-wrap: wrap;
    }

    .device-info {
        color: #ffffff;
        font-size: 18px;
        margin-right: 20px;
    }

    .imei-info {
        color: #ffffff;
        font-size: 18px;
    }

    .status-bar {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .status {
        padding: 5px 10px;
        border-radius: 4px;
        font-weight: bold;
    }

    .status.normal {
        background-color: #4CAF50;
        color: white;
    }

    .status.warning {
        background-color: #FFC107;
        color: #333;
    }

    .status.alarm {
        background-color: #F44336;
        color: white;
        animation: blink 1s infinite;
    }

    .status.abnormal {
        background-color: #FF9800;
        color: white;
    }

    .comm-status {
        padding: 5px 10px;
        border-radius: 4px;
        font-weight: bold;
    }

    .comm-status.normal {
        background-color: #4CAF50;
        color: white;
    }

    .comm-status.abnormal {
        background-color: #F44336;
        color: white;
    }

    .time {
        color: #ffffff;
    }

    .main-content {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .left-panel, .right-panel {
        flex: 1;
        min-width: 400px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .card {
        background: linear-gradient(135deg, #142339, #152555);
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .card-header {
        padding: 15px 20px;
        background-color: #2c3e50;
        color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-header h3 {
        margin: 0;
        font-size: 18px;
    }

    .status-flags {
        display: flex;
        gap: 10px;
        font-size: 14px;
    }

    .status-flags .enabled {
        color: #4CAF50;
    }

    .status-flags .warning {
        color: #FF9800;
    }

    .status-flags .alarm {
        color: #F44336;
    }

    .status-flags .normal {
        color: #4CAF50;
    }

    .alarm-value {
        font-size: 14px;
        opacity: 0.8;
    }

    .card-body {
        padding: 20px;
    }

    .gauge-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .gauge {
        position: relative;
        width: 165px;
        height: 165px;
        margin-bottom: 10px;
    }

    .gauge-body {
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
        border: 10px solid #e0e0e0;
    }

    .gauge-fill {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        transform-origin: right center;
        transform: rotate(-90deg);
        transition: transform 0.5s ease, background-color 0.5s ease;
    }

    .gauge-fill.normal {
        background-color: #4CAF50;
    }

    .gauge-fill.alarm {
        background-color: #F44336;
    }

    .gauge-fill.warning {
        background-color: #FF9800;
    }

    .gauge-disabled {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #F44336;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #9e9e9e;
        font-size: 14px;
    }

    .gauge-value {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 24px;
        font-weight: bold;
        color: #333;
    }

    .gauge-label {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0 10px;
        color: #ffffff;
    }

    .temp-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .temp-item {
        padding: 15px;
        border-radius: 6px;
        border: 1px solid green;
        text-align: center;
        transition: all 0.3s;
    }

    .temp-item.alarm {
        border: 1px solid #F44336;
        animation: pulse 1.5s infinite;
    }

    .temp-item.disabled {
        border: 1px solid #e0e0e0;
        opacity: 0.6;
    }

    .temp-item.fault {
        border: 1px solid #FF9800;
    }

    .temp-value {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .temp-value.alarm {
        color: #F44336;
    }

    .temp-label {
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .temp-label .normal {
        color: #4CAF50;
    }

    .temp-label .alarm {
        color: #F44336;
    }

    .temp-status {
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 10px;
    }

    .temp-status.alarm {
        color: #F44336;
    }

    .temp-status:empty {
        display: none;
    }

    .voltage-current-grid, .power-grid, .harmonics-grid, .dido-grid, .control-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .param-row {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }

    .param-label {
        color: #ffffff;
    }

    .param-value {
        font-weight: bold;
    }

    .param-value.alarm {
        color: #F44336;
    }

    .param-value.warning {
        color: #FF9800;
    }

    .param-value.normal {
        color: #4CAF50;
    }

    .control-panel {
        margin-bottom: 20px;
    }

    .alarm-panel {
        background: linear-gradient(135deg, #142339, #152555);
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
    }

    .alarm-panel.active {
        border-left: 5px solid #F44336;
    }

    .alarm-header {
        padding: 15px 20px;
        background-color: #2c3e50;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .alarm-count {
        background-color: #F44336;
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 14px;
    }

    .alarm-list {
        max-height: 200px;
        overflow-y: auto;
    }

    .alarm-item {
        padding: 12px 20px;
        border-bottom: 1px solid #eee;
    }

    .alarm-item:last-child {
        border-bottom: none;
    }

    .alarm-time {
        font-size: 12px;
        color: #ffffff;
        margin-bottom: 5px;
    }

    .alarm-content {
        font-weight: 500;
    }

    .no-alarm {
        padding: 20px;
        text-align: center;
        color: #ffffff;
    }

    .alarm-status {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        padding: 10px;
        border-radius: 6px;
        font-weight: bold;
    }

    .alarm-status .alarm {
        background-color: rgba(244, 67, 54, 0.2);
        color: #F44336;
    }

    .alarm-status .warning {
        background-color: rgba(255, 152, 0, 0.2);
        color: #FF9800;
    }

    .alarm-icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        margin-right: 8px;
    }

    .alarm-icon.alarm {
        background-color: #F44336;
    }

    .alarm-icon.warning {
        background-color: #FF9800;
    }

    .alarm-text {
        font-size: 14px;
    }

    .ratio-info {
        font-size: 12px;
        display: flex;
        gap: 10px;
        opacity: 0.8;
    }

    @keyframes blink {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
        }
    }

    @media (max-width: 900px) {
        .main-content {
            flex-direction: column;
        }

        .left-panel, .right-panel {
            min-width: 100%;
        }

        .voltage-current-grid, .power-grid, .harmonics-grid, .dido-grid, .control-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
